import 'package:favor_cate/core/model/meal_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:favor_cate/core/extension/int_extension.dart';

class DetailContent extends StatelessWidget {
  final MealModel meal;
  DetailContent(this.meal);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          buildBannerImage(),
          buildMakeTitle(context, "制作材料"),
          buildMakeMaterial(context),
          buildMakeTitle(context, "步骤"),
          buildMakeSteps(context),
        ],
      ),
    );
  }

  Widget buildBannerImage() {
    return Image.network(meal.imageUrl, width: double.infinity, fit: BoxFit.cover,);
  }

  Widget buildMakeMaterial(BuildContext context) {
    return buildMakeContent(
      context,
      ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: meal.ingredients.length,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (ctx, index) {
            return Card(
              elevation: 12.px,
              color: Colors.amber,
              child: Padding(
                  padding:
                      EdgeInsets.symmetric(vertical: 5.px, horizontal: 10.px),
                  child: Text(meal.ingredients[index])),
            );
          }),
    );
  }

  Widget buildMakeSteps(BuildContext context) {
    return buildMakeContent(
      context, 
      ListView.separated(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (ctx, index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.pink,
                child: Text("#${index+1}"),
              ),
              title: Text(meal.steps[index]),
            );
          },
          separatorBuilder: (ctx, index) {
            return Divider();
          },
          itemCount: meal.steps.length)
    );
  }

  Widget buildMakeTitle(BuildContext context, String title) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20.px),
      child: Text(title, style: Theme.of(context).textTheme.headline3!.copyWith(
        fontWeight: FontWeight.bold,
        color: Colors.black
      ),),

    );
  }

  Widget buildMakeContent(BuildContext context, Widget child) {
    return Container(
      padding: EdgeInsets.all(8.px),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(12.px)
      ),
      width: MediaQuery
          .of(context)
          .size
          .width - 30.px,
      child: child,
    );
  }

}
